<template>
  <div class="notices-container">
    <div class="notices-header">
      <h2>通知中心</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleCreate">
          <i class="el-icon-plus"></i> 发布通知
        </el-button>
        <el-button @click="handleMarkAllRead">
          <i class="el-icon-check"></i> 全部已读
        </el-button>
      </div>
    </div>

    <div class="notices-content">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="厨小圈" name="community">
          <div class="notice-list">
            <el-empty v-if="!communityNotices.length" :image-size="200" description="暂无交流信息"></el-empty>
            <div v-else v-for="notice in communityNotices" :key="notice.id" 
                 class="notice-item" 
                 :class="{ 'unread': !notice.is_read }">
              <div class="notice-avatar">
                <el-avatar :size="40" :src="notice.author && notice.author.first_name || '/default-avatar.png'">
                  {{ notice.author && notice.author.username ? notice.author.username.charAt(0).toUpperCase() : '' }}
                </el-avatar>
              </div>
              <div class="notice-content">
                <div class="notice-title">
                  <span class="author">{{ notice.author && notice.author.username || '未知用户' }}</span>
                  <span class="time">{{ formatTime(notice.created_at) }}</span>
                </div>
                <div class="notice-text" @click="handleView(notice)">
                  <h4>{{ notice.title }}</h4>
                  <p>{{ notice.content }}</p>
                </div>
                <div class="notice-footer">
                  <div class="left-actions">
                    <span class="type-tag community">厨小圈</span>
                    <span class="read-status" v-if="!notice.is_read">未读</span>
                  </div>
                  <div class="right-actions">
                    <span class="action-item" @click="handleLike(notice)">
                      <i :class="['el-icon-star-off', { 'liked': notice.is_liked }]"></i>
                      <span>{{ notice.likes_count || 0 }}</span>
                    </span>
                    <span class="action-item" @click="handleView(notice)">
                      <i class="el-icon-chat-dot-round"></i>
                      <span>{{ notice.comments_count || 0 }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="系统通知" name="system">
          <div class="notice-list">
            <el-empty v-if="!systemNotices.length" :image-size="200" description="暂无系统通知"></el-empty>
            <div v-else v-for="notice in systemNotices" :key="notice.id" 
                 class="notice-item" 
                 :class="{ 'unread': !notice.is_read }">
              <div class="notice-avatar">
                <el-avatar :size="40" :src="notice.author && notice.author.first_name || '/default-avatar.png'">
                  {{ notice.author && notice.author.username ? notice.author.username.charAt(0).toUpperCase() : '' }}
                </el-avatar>
              </div>
              <div class="notice-content">
                <div class="notice-title">
                  <span class="author">{{ notice.author && notice.author.username || '未知用户' }}</span>
                  <span class="time">{{ formatTime(notice.created_at) }}</span>
                </div>
                <div class="notice-text" @click="handleView(notice)">
                  <h4>{{ notice.title }}</h4>
                  <p>{{ notice.content }}</p>
                </div>
                <div class="notice-footer">
                  <div class="left-actions">
                    <span class="type-tag system">系统通知</span>
                    <span class="read-status" v-if="!notice.is_read">未读</span>
                  </div>
                  <div class="right-actions">
                    <span class="action-item" @click="handleLike(notice)">
                      <i :class="['el-icon-star-off', { 'liked': notice.is_liked }]"></i>
                      <span>{{ notice.likes_count || 0 }}</span>
                    </span>
                    <span class="action-item" @click="handleView(notice)">
                      <i class="el-icon-chat-dot-round"></i>
                      <span>{{ notice.comments_count || 0 }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="活动通知" name="activity">
          <div class="notice-list">
            <el-empty v-if="!activityNotices.length" :image-size="200" description="暂无活动通知"></el-empty>
            <div v-else v-for="notice in activityNotices" :key="notice.id" 
                 class="notice-item" 
                 :class="{ 'unread': !notice.is_read }">
              <div class="notice-avatar">
                <el-avatar :size="40" :src="notice.author && notice.author.first_name || '/default-avatar.png'">
                  {{ notice.author && notice.author.username ? notice.author.username.charAt(0).toUpperCase() : '' }}
                </el-avatar>
              </div>
              <div class="notice-content">
                <div class="notice-title">
                  <span class="author">{{ notice.author && notice.author.username || '未知用户' }}</span>
                  <span class="time">{{ formatTime(notice.created_at) }}</span>
                </div>
                <div class="notice-text" @click="handleView(notice)">
                  <h4>{{ notice.title }}</h4>
                  <p>{{ notice.content }}</p>
                </div>
                <div class="notice-footer">
                  <div class="left-actions">
                    <span class="type-tag activity">活动通知</span>
                    <span class="read-status" v-if="!notice.is_read">未读</span>
                  </div>
                  <div class="right-actions">
                    <span class="action-item" @click="handleLike(notice)">
                      <i :class="['el-icon-star-off', { 'liked': notice.is_liked }]"></i>
                      <span>{{ notice.likes_count || 0 }}</span>
                    </span>
                    <span class="action-item" @click="handleView(notice)">
                      <i class="el-icon-chat-dot-round"></i>
                      <span>{{ notice.comments_count || 0 }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="未读消息" name="unread">
          <div class="notice-list">
            <el-empty v-if="!unreadNotices.length" :image-size="200" description="暂无未读消息"></el-empty>
            <div v-else v-for="notice in unreadNotices" :key="notice.id" 
                 class="notice-item unread">
              <div class="notice-avatar">
                <el-avatar :size="40" :src="notice.author && notice.author.first_name || '/default-avatar.png'">
                  {{ notice.author && notice.author.username ? notice.author.username.charAt(0).toUpperCase() : '' }}
                </el-avatar>
              </div>
              <div class="notice-content">
                <div class="notice-title">
                  <span class="author">{{ notice.author && notice.author.username || '未知用户' }}</span>
                  <span class="time">{{ formatTime(notice.created_at) }}</span>
                </div>
                <div class="notice-text" @click="handleView(notice)">
                  <h4>{{ notice.title }}</h4>
                  <p>{{ notice.content }}</p>
                </div>
                <div class="notice-footer">
                  <div class="left-actions">
                    <span class="type-tag" :class="notice.type">{{ getTypeLabel(notice.type) }}</span>
                  </div>
                  <div class="right-actions">
                    <span class="action-item" @click="handleLike(notice)">
                      <i :class="['el-icon-star-off', { 'liked': notice.is_liked }]"></i>
                      <span>{{ notice.likes_count || 0 }}</span>
                    </span>
                    <span class="action-item" @click="handleView(notice)">
                      <i class="el-icon-chat-dot-round"></i>
                      <span>{{ notice.comments_count || 0 }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 通知详情对话框 -->
    <el-dialog
      :title="currentNotice.title"
      :visible.sync="dialogVisible"
      width="800px"
      class="notice-dialog"
      @close="handleDialogClose">
      <div class="notice-detail">
        <div class="detail-header">
          <el-avatar :size="50" :src="currentNotice.author && currentNotice.author.first_name || '/default-avatar.png'">
            {{ currentNotice.author && currentNotice.author.username ? currentNotice.author.username.charAt(0).toUpperCase() : '' }}
          </el-avatar>
          <div class="detail-info">
            <h3>{{ currentNotice.author && currentNotice.author.username || '未知用户' }}</h3>
            <span class="time">{{ formatTime(currentNotice.created_at) }}</span>
          </div>
        </div>
        <div class="detail-content">
          <p>{{ currentNotice.content }}</p>
          <div class="detail-footer">
            <span class="type-tag" :class="currentNotice.type">
              {{ getTypeLabel(currentNotice.type) }}
            </span>
            <div class="actions">
              <el-button type="text" @click="handleLike(currentNotice)">
                <i :class="['el-icon-star-off', { 'liked': currentNotice.is_liked }]"></i>
                <span>{{ currentNotice.likes_count || 0 }}</span>
              </el-button>
              <el-button type="text" @click="handleEdit" v-if="canEdit">编辑</el-button>
              <el-button type="text" @click="handleDelete" v-if="canEdit">删除</el-button>
            </div>
          </div>
        </div>

        <!-- 评论区域 -->
        <div class="comments-section">
          <h4>评论 ({{ currentNotice.comments_count || 0 }})</h4>
          <div class="comment-form">
            <el-input
              type="textarea"
              v-model="commentContent"
              :rows="2"
              placeholder="写下你的评论..."
            ></el-input>
            <el-button type="primary" @click="handleComment" :disabled="!commentContent.trim()">
              发表评论
            </el-button>
          </div>
          <div class="comments-list">
            <div v-for="comment in currentNotice.comments" :key="comment.id" class="comment-item">
              <div class="comment-header">
                <el-avatar :size="32" :src="comment.author && comment.author.first_name || '/default-avatar.png'">
                  {{ comment.author && comment.author.username ? comment.author.username.charAt(0).toUpperCase() : '' }}
                </el-avatar>
                <div class="comment-info">
                  <span class="author">{{ comment.author && comment.author.username || '未知用户' }}</span>
                  <span class="time">{{ formatTime(comment.created_at) }}</span>
                </div>
              </div>
              <div class="comment-content">
                <p>{{ comment.content }}</p>
                <div class="comment-actions">
                  <el-button type="text" @click="handleCommentLike(comment)">
                    <i :class="['el-icon-star-off', { 'liked': comment.is_liked }]"></i>
                    <span>{{ comment.likes_count || 0 }}</span>
                  </el-button>
                  <el-button type="text" @click="handleReply(comment)">回复</el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 添加评论列表分页 -->
          <div class="pagination-container">
            <el-pagination
              @size-change="handleCommentSizeChange"
              @current-change="handleCommentPageChange"
              :current-page="commentPagination.currentPage"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="commentPagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="commentPagination.total">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑/创建通知对话框 -->
    <el-dialog
      :title="isEdit ? '编辑通知' : '发布通知'"
      :visible.sync="editDialogVisible"
      width="500px"
      class="notice-edit-dialog">
      <el-form ref="noticeForm" :model="noticeForm" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="noticeForm.title" placeholder="请输入通知标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="noticeForm.content" rows="4" placeholder="请输入通知内容"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="notice_type">
          <el-select v-model="noticeForm.notice_type" placeholder="请选择通知类型">
            <el-option label="厨小圈" value="community"></el-option>
            <el-option label="系统通知" value="system"></el-option>
            <el-option label="活动通知" value="activity"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getNotices, getNoticeDetail, createNotice, updateNotice, deleteNotice, markNoticeAsRead, markAllNoticesAsRead, likeNotice, getComments, createComment, likeComment } from '@/api/notices'

export default {
  name: 'Notices',
  data() {
    return {
      notices: [],
      unreadNotices: [],
      communityNotices: [],
      systemNotices: [],
      activityNotices: [],
      activeTab: 'community',
      dialogVisible: false,
      editDialogVisible: false,
      currentNotice: {},
      isEdit: false,
      noticeForm: {
        title: '',
        content: '',
        notice_type: 'system'
      },
      rules: {
        title: [
          { required: true, message: '请输入通知标题', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入通知内容', trigger: 'blur' },
          { min: 5, max: 500, message: '长度在 5 到 500 个字符', trigger: 'blur' }
        ],
        notice_type: [
          { required: true, message: '请选择通知类型', trigger: 'change' }
        ]
      },
      commentContent: '',
      noticePagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      commentPagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  computed: {
    canEdit() {
      const userInfo = this.$store.state.user.userInfo
      return this.currentNotice && 
             this.currentNotice.author && 
             userInfo && 
             this.currentNotice.author.username === userInfo.username
    }
  },
  created() {
    this.fetchNotices()
  },
  methods: {
    async fetchNotices(params = {}) {
      try {
        const requestParams = {
          page: this.noticePagination.currentPage,
          page_size: this.noticePagination.pageSize,
          ...params
        }
        const response = await getNotices(requestParams)
        console.log('通知列表响应数据:', response)
        
        if (response && response.code === 1) {
          // 从响应中获取数据
          this.notices = response.data || []
          this.noticePagination.total = response.data.length || 0
          
          // 分类通知，保持已读状态
          this.communityNotices = this.notices.filter(notice => notice.notice_type === 'community')
          this.systemNotices = this.notices.filter(notice => notice.notice_type === 'system')
          this.activityNotices = this.notices.filter(notice => notice.notice_type === 'activity')
          this.unreadNotices = this.notices.filter(notice => !notice.is_read)
        } else {
          console.error('获取通知列表失败:', response)
          this.$message.error((response && response.msg) || '获取通知列表失败')
        }
      } catch (error) {
        console.error('获取通知列表异常:', error)
        this.$message.error('获取通知列表失败')
      }
    },
    async handleView(notice) {
      try {
        const response = await getNoticeDetail(notice.id)
        if (response && response.code === 1) {
          this.currentNotice = response.data
          this.dialogVisible = true
          
          // 如果未读，标记为已读并更新列表中的状态
          if (!notice.is_read) {
            await markNoticeAsRead(notice.id)
            // 更新当前通知的已读状态
            notice.is_read = true
            // 更新未读列表
            this.unreadNotices = this.notices.filter(n => !n.is_read)
          }
          
          // 获取评论列表
          await this.fetchComments(notice.id)
        } else {
          this.$message.error((response && response.msg) || '获取通知详情失败')
        }
      } catch (error) {
        console.error('获取通知详情失败:', error)
        this.$message.error('获取通知详情失败')
      }
    },
    async fetchComments(noticeId) {
      try {
        const params = {
          page: this.commentPagination.currentPage,
          page_size: this.commentPagination.pageSize
        }
        const response = await getComments(noticeId, params)
        if (response && response.code === 1) {
          this.currentNotice.comments = response.data || []
          this.commentPagination.total = response.data.length || 0
        } else {
          this.$message.error((response && response.msg) || '获取评论失败')
        }
      } catch (error) {
        console.error('获取评论失败:', error)
        this.$message.error('获取评论失败')
      }
    },
    async handleMarkAllRead() {
      try {
        const response = await markAllNoticesAsRead()
        if (response && response.code === 1) {
          this.notices.forEach(notice => notice.is_read = true)
          this.unreadNotices = []
          this.$message.success((response && response.msg) || '全部标记为已读成功')
        } else {
          this.$message.error((response && response.msg) || '操作失败')
        }
      } catch (error) {
        console.error('标记已读失败:', error)
        this.$message.error('操作失败')
      }
    },
    handleCreate() {
      this.isEdit = false
      this.noticeForm = {
        title: '',
        content: '',
        notice_type: 'system'
      }
      this.editDialogVisible = true
    },
    handleEdit() {
      this.isEdit = true
      this.noticeForm = { ...this.currentNotice }
      this.editDialogVisible = true
    },
    async handleDelete() {
      try {
        await this.$confirm('确定要删除这条通知吗？', '提示', {
          type: 'warning'
        })
        const response = await deleteNotice(this.currentNotice.id)
        if (response && response.code === 1) {
          this.dialogVisible = false
          this.$message.success((response && response.msg) || '删除成功')
          // 重新获取最新数据
          await this.fetchNotices()
        } else {
          this.$message.error((response && response.msg) || '删除失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }
    },
    async handleLike(notice) {
      try {
        const response = await likeNotice(notice.id)
        if (response && response.code === 1) {
          notice.is_liked = !notice.is_read
          notice.likes_count = notice.is_liked ? (notice.likes_count || 0) + 1 : (notice.likes_count || 1) - 1
          this.$message.success((response && response.msg) || '操作成功')
        } else {
          this.$message.error((response && response.msg) || '操作失败')
        }
      } catch (error) {
        console.error('点赞失败:', error)
        this.$message.error('操作失败')
      }
    },
    handleTabClick() {
      // 根据当前选中的标签页获取对应类型的通知
      const params = {
        page: this.noticePagination.currentPage,
        page_size: this.noticePagination.pageSize
      }
      
      // 根据标签页类型设置请求参数
      switch (this.activeTab) {
        case 'community':
          params.type = 'community'
          break
        case 'system':
          params.type = 'system'
          break
        case 'activity':
          params.type = 'activity'
          break
        case 'unread':
          // 未读消息不需要设置类型
          break
      }
      
      this.fetchNotices(params)
    },
    handleDialogClose() {
      this.currentNotice = {}
      this.commentContent = ''
    },
    formatTime(time) {
      const date = new Date(time)
      const now = new Date()
      const diff = now - date
      
      // 小于1分钟
      if (diff < 60000) {
        return '刚刚'
      }
      // 小于1小时
      if (diff < 3600000) {
        return Math.floor(diff / 60000) + '分钟前'
      }
      // 小于24小时
      if (diff < 86400000) {
        return Math.floor(diff / 3600000) + '小时前'
      }
      // 小于30天
      if (diff < 2592000000) {
        return Math.floor(diff / 86400000) + '天前'
      }
      
      // 超过30天显示具体日期
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    getTypeLabel(type) {
      const types = {
        system: '系统通知',
        activity: '活动通知',
        community: '厨小圈'
      }
      return types[type] || '通知'
    },
    async handleSubmit() {
      try {
        await this.$refs.noticeForm.validate()
        let response
        if (this.isEdit) {
          response = await updateNotice(this.currentNotice.id, this.noticeForm)
        } else {
          response = await createNotice(this.noticeForm)
        }
        
        if (response && response.code === 1) {
          this.editDialogVisible = false
          this.fetchNotices()
          this.$message.success((response && response.msg) || (this.isEdit ? '更新成功' : '发布成功'))
        } else {
          this.$message.error((response && response.msg) || (this.isEdit ? '更新失败' : '发布失败'))
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error(this.isEdit ? '更新失败' : '发布失败')
        }
      }
    },
    async handleComment() {
      if (!this.commentContent.trim()) return
      try {
        const response = await createComment(this.currentNotice.id, { content: this.commentContent })
        if (response && response.code === 1) {
          this.commentContent = ''
          await this.fetchComments(this.currentNotice.id)
          this.currentNotice.comments_count = (this.currentNotice.comments_count || 0) + 1
          this.$message.success((response && response.msg) || '评论成功')
        } else {
          this.$message.error((response && response.msg) || '评论失败')
        }
      } catch (error) {
        console.error('评论失败:', error)
        this.$message.error('评论失败')
      }
    },
    async handleCommentLike(comment) {
      try {
        const response = await likeComment(comment.id)
        if (response && response.code === 1) {
          comment.is_liked = !comment.is_liked
          comment.likes_count = comment.is_liked ? (comment.likes_count || 0) + 1 : (comment.likes_count || 1) - 1
          this.$message.success((response && response.msg) || '操作成功')
        } else {
          this.$message.error((response && response.msg) || '操作失败')
        }
      } catch (error) {
        console.error('点赞失败:', error)
        this.$message.error('操作失败')
      }
    },
    handleReply(comment) {
      this.commentContent = `@${comment.author && comment.author.username || '未知用户'} `
    },
    handleNoticePageChange(page) {
      this.noticePagination.currentPage = page
      this.fetchNotices()
    },
    handleNoticeSizeChange(size) {
      this.noticePagination.pageSize = size
      this.noticePagination.currentPage = 1
      this.fetchNotices()
    },
    handleCommentPageChange(page) {
      this.commentPagination.currentPage = page
      this.fetchComments(this.currentNotice.id)
    },
    handleCommentSizeChange(size) {
      this.commentPagination.pageSize = size
      this.commentPagination.currentPage = 1
      this.fetchComments(this.currentNotice.id)
    },
  }
}
</script>

<style scoped>
.notices-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.notices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
}

.notices-header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.notices-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  padding: 20px;
}

.notice-list .notice-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
}

.notice-list .notice-item:hover {
  background: #f5f7fa;
}

.notice-list .notice-item.unread {
  background: #f0f9ff;
}

.notice-avatar {
  margin-right: 15px;
}

.notice-content {
  flex: 1;
}

.notice-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.notice-title .author {
  font-weight: bold;
  color: #303133;
}

.notice-title .time {
  color: #909399;
  font-size: 13px;
}

.notice-text {
  color: #606266;
  margin-bottom: 8px;
  line-height: 1.5;
  cursor: pointer;
}

.notice-text h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
}

.notice-text p {
  margin: 0;
  color: #606266;
}

.notice-text:hover h4 {
  color: #409EFF;
}

.notice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.type-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.type-tag.system {
  background: #409EFF;
}

.type-tag.activity {
  background: #67C23A;
}

.type-tag.community {
  background: #67C23A;
}

.read-status {
  color: #409EFF;
  font-size: 12px;
}

.right-actions {
  display: flex;
  gap: 20px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #909399;
  cursor: pointer;
  transition: all 0.3s;
}

.action-item:hover {
  color: #409EFF;
}

.action-item i {
  font-size: 16px;
}

.action-item i.liked {
  color: #F56C6C;
}

.action-item span {
  font-size: 13px;
}

.notice-dialog .notice-detail .detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.notice-dialog .notice-detail .detail-info {
  margin-left: 15px;
}

.notice-dialog .notice-detail .detail-info h3 {
  margin: 0 0 5px 0;
  color: #303133;
}

.notice-dialog .notice-detail .detail-info .time {
  color: #909399;
  font-size: 13px;
}

.notice-dialog .notice-detail .detail-content p {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 20px;
}

.notice-dialog .notice-detail .detail-content .detail-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comments-section {
  margin-top: 30px;
  border-top: 1px solid #ebeef5;
  padding-top: 20px;
}

.comments-section h4 {
  margin: 0 0 20px 0;
  color: #303133;
  font-size: 16px;
}

.comment-form {
  margin-bottom: 20px;
}

.comment-form .el-button {
  margin-top: 10px;
  float: right;
}

.comments-list {
  margin-top: 20px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-info {
  margin-left: 10px;
}

.comment-info .author {
  font-weight: bold;
  color: #303133;
  margin-right: 10px;
}

.comment-info .time {
  color: #909399;
  font-size: 12px;
}

.comment-content {
  margin-left: 42px;
}

.comment-content p {
  margin: 0 0 10px 0;
  color: #606266;
  line-height: 1.5;
}

.comment-actions {
  display: flex;
  gap: 15px;
}

.comment-actions .el-button {
  padding: 0;
  font-size: 13px;
  color: #909399;
}

.comment-actions .el-button:hover {
  color: #409EFF;
}

.comment-actions i.liked {
  color: #F56C6C;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style> 